<script lang="ts">
  import { createEventDispatcher } from 'svelte';
  import CaptionItem from './CaptionItem.svelte';
  import type { BroadcastData } from '../types/vtuber';
  const emit = createEventDispatcher();
  export let nowBroadcastData: BroadcastData;
  export let isShow: boolean = false;
  export let isAutoPlay: boolean = false;
  export let autoplaytipsIsShow: number = 0;
  export let openAnimationSign: boolean = false;
  export let isPartChangeTips: number = 0;
  let lastBroadcastData: BroadcastData;
  let captionDom: HTMLElement | void;

  let startAnimation: boolean = false;
  let timer;
  const changeScrollTop = ({ detail: { top } }) => {
    if (captionDom) {
      const scrollDomTop = captionDom.offsetTop;
      captionDom.scrollTop = top - scrollDomTop - 30;
    }
  };

  const checkChanged: (num: number) => boolean = (function () {
    let previousValue: number | null = null;
    return function (num: number) {
      if (num !== previousValue) {
        previousValue = num;
        return true;
      } else {
        return false;
      }
    };
  })();
  $: {
    if (!!autoplaytipsIsShow && captionDom) {
      captionDom.scrollTop = captionDom.scrollHeight;
    }
  }
  $: {
    if (isPartChangeTips && checkChanged(isPartChangeTips) && nowBroadcastData) {
      lastBroadcastData = JSON.parse(JSON.stringify(nowBroadcastData));
      startAnimation = true;
      timer && clearTimeout(timer);
      timer = setTimeout(() => {
        startAnimation = false;
      }, 400);
    }
  }
</script>

<div class="caption-container">
  <div class="caption {startAnimation ? 'start-animation-fade' : 'hidden'}">
    {#if lastBroadcastData?.broadcastContents?.length}
      {#each lastBroadcastData.broadcastContents as broadcastContent}
        <CaptionItem isShow={true} content={broadcastContent} />
      {/each}
    {/if}
    {#if !!autoplaytipsIsShow}
      <div class="autoplay-tips">
        {isAutoPlay ? '已开启' : '已关闭'}自动播报
      </div>
    {/if}
  </div>
  <div
    class="caption {openAnimationSign ? 'move-animation' : ''} {startAnimation
      ? 'start-animation-show'
      : 'show'}"
    bind:this={captionDom}
  >
    {#if nowBroadcastData?.broadcastContents?.length}
      {#each nowBroadcastData.broadcastContents as broadcastContent}
        <CaptionItem
          {isShow}
          content={broadcastContent}
          on:broadcastLive={() => emit('broadcastLive')}
          on:changeScrollTop={changeScrollTop}
        />
      {/each}
    {/if}
    {#if !!autoplaytipsIsShow}
      <div class="autoplay-tips">
        {isAutoPlay ? '已开启' : '已关闭'}自动播报
      </div>
    {/if}
  </div>
</div>

<style lang="less">
  @keyframes toggle-fade {
    0% {
      opacity: 1;
      transform: translateY(0);
    }
    100% {
      opacity: 0;
      transform: translateY(-100%);
    }
  }
  @keyframes toggle-show {
    0% {
      opacity: 0;
      transform: translateY(0);
    }
    100% {
      opacity: 1;
      transform: translateY(calc(-100% + 20px));
    }
  }

  .hidden {
    display: none;
  }
  .show {
    display: block;
  }

  .caption-container {
    width: 100%;
    height: 318px;
    margin-top: -16px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
      179deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 1) 7%,
      rgba(255, 255, 255, 1) 90%,
      rgba(255, 255, 255, 0) 100%
    );
    .caption {
      width: 284px;
      height: 318px;
      overflow-y: auto;
      overflow-x: hidden;
      transform: translateY(20px);
      transition: transform 0.4s;
      &.start-animation-fade {
        transition: none;
        animation: toggle-fade 0.4s;
      }
      &.start-animation-show {
        transition: none;
        animation: toggle-show 0.4s;
      }
      &.move-animation {
        transform: translateY(0);
      }
      &::-webkit-scrollbar {
        width: 0;
        background-color: transparent;
      }
      &::-webkit-scrollbar-track {
        background-color: transparent;
      }
      &::-webkit-scrollbar-thumb {
        background-color: transparent;
      }
      :global(.caption-item:first-child) {
        margin-top: 20px;
      }
      .autoplay-tips {
        width: 100%;
        height: 45px;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #1576d1;
        letter-spacing: 0;
        text-align: center;
        white-space: nowrap;
        font-weight: 400;
      }
    }
  }
  ::-webkit-scrollbar {
    width: 6px;
    height: 0;
  }
</style>
